<!-- 添加管理员 -->
<template>
  <div
    id="add"
    :style="{
      backgroundColor: bgcColor.color === '#000' ? '#fff' : 'rgb(33, 33, 48)',
      color: bgcColor.color === '#000' ? '#000' : 'rgb(33, 33, 48)'
    }"
  >
    <h2>添加管理员</h2>
    <el-form
      ref="Dataform"
      :model="formData"
      label-width="120px"
      label-position="top"
      :rules="rules"
      status-icon
      clearable
    >
      <el-form-item label="用户名" prop="name">
        <el-input v-model.trim="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="邮箱地址" prop="email">
        <el-input v-model.trim="formData.email"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input v-model.trim="formData.pass" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认的密码" prop="pass2">
        <el-input v-model.trim="formData.pass2" type="password"></el-input>
      </el-form-item>
    </el-form>
    <el-checkbox
      v-model="notify"
      label="是否发送邮件通知该管理员"
      size="large"
    />
    <br />
    <el-button type="primary" @click="submit">添加管理员</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, unref, computed } from 'vue'
import { useStore } from 'vuex'
import { formData, rules } from '@/hooks/addAdmintor'
import { ElForm, ElMessage } from 'element-plus'
import { addAdmintor } from '@/server/serve/api_admintor'

const store = useStore()

const bgcColor = computed(() => store.state.Background)

// 表单元素
const Dataform = ref<InstanceType<typeof ElForm>>()
// 是否通知
const notify = ref<boolean>(true)

// 添加管理员
const submit = async () => {
  const formvaild = unref(Dataform)
  if (!formvaild) return
  try {
    await formvaild?.validate()
    const { data } = await addAdmintor(
      formData.name,
      formData.email,
      formData.pass,
      notify.value
    )
    if (data.code)
      return ElMessage({
        type: 'warning',
        message: data.mes
      })
    ElMessage({
      type: 'success',
      message: data.mes
    })

    // 清空表单
    formvaild?.resetFields()
  } catch (error) {
    console.log('')
  }
}
</script>

<style scoped lang="less">
#add {
  padding: 20px;
  border-radius: 16px;
  overflow: hidden;
  h2 {
    color: #f56c6c;
    margin-bottom: 20px;
  }
  .el-form {
    .el-form-item {
      width: 250px;
    }
  }
}
</style>
